<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>面板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="stylesheet" href="/static/admin/static/component/pear/css/pear.css" />
    <link href="/static/public/libs/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/admin/pages/dashboard/css/dashboard.css?v=#(version)" rel="stylesheet"/>
</head>
<body class="pear-container">
<div class="p-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="p-card-left">文章</div>
                    <div class="p-card-right"><i class="layui-icon layui-icon-read" style="color: #00c292"></i></div>
                </div>
                <div class="layui-card-body">
                    <div class="p-card-num">#(articleCount) <span
                            class="p-card-num-text">篇</span></div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="p-card-left">评论</div>
                    <div class="p-card-right"><i class="layui-icon layui-icon-dialogue" style="color: #ab8ce4"></i></div>
                </div>
                <div class="layui-card-body">
                    <div class="p-card-num">#(commentCount) <span
                            class="p-card-num-text">条</span></div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="p-card-left">标签</div>
                    <div class="p-card-right"><i class="layui-icon layui-icon-note" style="color: #03a9f3"></i></div>
                </div>
                <div class="layui-card-body">
                    <div class="p-card-num">#(tagCount) <span class="p-card-num-text">个</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="p-card-left">用户</div>
                    <div class="p-card-right"><i class="layui-icon layui-icon-username" style="color: #fb9678"></i></div>
                </div>
                <div class="layui-card-body">
                    <div class="p-card-num">#(userCount) <span class="p-card-num-text">个</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="p-card-left">最新文章</div>
                </div>
                <div class="layui-card-body" style="min-height: 530px" id="articlePanel">
                    加载中...
                </div>
            </div>
        </div>


        <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="p-card-left">最新评论</div>
                </div>
                <div class="layui-card-body" style="min-height: 530px;" id="commentPanel">
                    加载中...
                </div>
            </div>
        </div>
    </div>

    <div class="p-footer">
        由<a href="http://www.perfree.org" target="_blank">Perfree</a>提供支持,当前版本V#(version)
    </div>
</div>
<script src="/static/public/libs/layui-v2.5.6/layui/layui.js"></script>
<script src="/static/admin/static/component/pear/pear.js"></script>
<script>
    let util, layer, $,toast;
    layui.use(['util', 'layer', 'jquery','toast'], function () {
        util = layui.util;
        layer = layui.layer;
        $ = layui.jquery;
        toast = layui.toast;
        // 加载最新文章
        $.get("/admin/dashboard/getArticleList?count=" + 12, function (res) {
            if (res.code === 200) {
                let html = "<ul>";
                res.data.forEach(d => {
                    html += `<li class="p-cart-li">
                            <span class="p-card-article-time">${util.timeAgo(d.createTime, true)}</span>
                            <a class="p-card-article-title" href="${d.url}" target="_blank">${d.title}</a>
                        </li>`;
                });

                if (res.data === null || res.data.length <= 0) {
                    html = "暂无内容";
                } else {
                    html += "</ul>";
                }
                $("#articlePanel").html(html);
            } else {
                parent.toast.error({message: "加载最新文章失败",position: 'topCenter'});
            }
        });

        // 加载最新评论
        $.get("/admin/dashboard/getCommentList?count=" + 6, function (res) {
            if (res.code === 200) {
                let html = "";
                res.data.forEach(d => {
                    html += `
                        <div class="comment-box">
                            <div class="comment-left">
                                <img src="${d.avatar}">
                            </div>
                            <div class="comment-right">
                                <div>
                                    <span class="comment-user">${d.userName}</span>
                                    <span  class="comment-article">发表在《${d.article.title}》</span>
                                    <span class="comment-time">${util.timeAgo(d.createTime, true)}</span>
                                </div>
                                <div class="comment-content">${ d.content}</div>
                            </div>
                        </div>
                    `;
                });

                if (res.data === null || res.data.length <= 0) {
                    html = "暂无内容";
                } else {
                    html += "";
                }
                $("#commentPanel").html(html);
            } else {
                parent.toast.error({message: "加载最新评论失败",position: 'topCenter'});
            }

        });
    });
</script>
</body>
</html>